<template>
	<view class="uni-padding-wrap uni-common-mt">
		<view>
			<text>\nscroll-view纵向滚动</text>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view class="scroll-view-item uni-bg-red" style="text-align: center;">chen</view>
				<view class="scroll-view-item uni-bg-green" style="text-align: center;">wu</view>
				<view class="scroll-view-item uni-bg-blue" style="text-align: center;">yang</view>
			</scroll-view>
			<view @tap="goTop" style="text-align: center;" class="uni-common-mt">
				点击这里返回顶部
			</view>
			<text>\nscroll-view横向滚动</text>
			<view>
				<scroll-view style="width: 100%;white-space: nowrap;" scroll-x="true">
					<view class="scroll-view-item_H uni-bg-red">A</view>
					<view class="scroll-view-item_H uni-bg-blue">B</view>
					<view class="scroll-view-item_H uni-bg-green">C</view>
				</scroll-view>
			</view>
			<text>\nswiper轮播图</text>
			<view class="uni-margin-wrap">
				<swiper class="swiper" :indicator-dots="indicatordot" :autoplay="autoplay" :interval="5000" :duration="5000">
						<swiper-item>
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">C</view>
						</swiper-item>
				</swiper>
				<view class="swiper"></view>
			</view>
			<view class="swiper-list">
				<view class="uni-list-cell uni-list-cell-db" style="height:70rpx;">
					<view class="uni-list-cell-db">指示点</view>
					<switch checked="indicatordot" @change="changeIndicatorDots" style="transform: scale(0.7);"></switch>
				</view>
				<view class="uni-list-cell uni-list-cell-db" style="height: 70rpx;">
					<view class="uni-list-cell-db">自动播放</view>
					<switch checked="autoplay" @change="changeAutoPlay" style="transform: scale(0.7);"></switch>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollTop:0,
				old:{
					scrollTop:100
				},
				indicatordot: true,
				autoplay: true,
			}
		},
		methods :{
			//滚动到顶部的监听
			upper:function(e){
				console.log(1)
			},
			//滚动到底部的监听
			lower:function(e){
				console.log(2)
			},
			//滚动的监听
			scroll:function(e){
				console.log(this.old.scrollTop)
				this.old.scrollTop = e.detail.scrollTop
				console.log(this.old.scrollTop)
			},
			goTop:function(e){
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function(){
					this.scrollTop = 0
				});
				uni.showToast({
					icon:'none',
					title:'纵向滚动 首次透露了T哦破 值已修改为 0'
				});
			},
			changeIndicatorDots:function(e){
				this.indicatordot = !this.indicatordot
			},
			changeAutoPlay:function(e){
				this.autoplay = !this.autoplay
			}
		}
	}
</script>

<style>
	.scroll-view-item{
		height: 300rpx;
		line-height: 300rpx;
		text-align: start;
		font-size: 36rpx;
	}
	
	.scroll-view-item_H{
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	
	
	.uni-margin-wrap{
		width: 690rpx;
		width: 100%;
		height: 300rpx;
	}
	.swiper{
		height: 300rpx;
	}
	.swiper-item{
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list{
		margin-top: 40rpx;
		margin-bottom: 0;
	}
</style>